<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Unitree RL Sim2Sim Demo</title>
    
    <!-- 国内CDN资源 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/three.js/r155/three.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/Chart.js/4.4.0/chart.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.6.7/axios.min.js"></script>
    
    <style>
        body {
            background-color: #f8f9fa;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }
        
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 2rem 0;
            margin-bottom: 2rem;
        }
        
        .card {
            border: none;
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
            transition: box-shadow 0.3s ease;
        }
        
        .card:hover {
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        }
        
        .status-indicator {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            display: inline-block;
            margin-right: 8px;
        }
        
        .status-running {
            background-color: #28a745;
            animation: pulse 2s infinite;
        }
        
        .status-stopped {
            background-color: #dc3545;
        }
        
        @keyframes pulse {
            0% {
                opacity: 1;
            }
            50% {
                opacity: 0.5;
            }
            100% {
                opacity: 1;
            }
        }
        
        .simulation-view {
            background: #000;
            border-radius: 0.375rem;
            min-height: 400px;
            position: relative;
            overflow: hidden;
        }
        
        .metric-card {
            text-align: center;
            padding: 1.5rem;
        }
        
        .metric-value {
            font-size: 2rem;
            font-weight: bold;
            color: #667eea;
        }
        
        .metric-label {
            color: #6c757d;
            font-size: 0.875rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="container">
            <h1 class="mb-0">
                <i class="fas fa-robot me-3"></i>
                Unitree RL Sim2Sim Demo
            </h1>
            <p class="mb-0 opacity-75">强化学习运动控制仿真迁移验证平台</p>
        </div>
    </div>

    <div class="container">
        <!-- 控制面板 -->
        <div class="row mb-4">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-cogs me-2"></i>
                            仿真控制
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">仿真状态</label>
                                    <div>
                                        <span class="status-indicator" id="statusIndicator"></span>
                                        <span id="statusText">已停止</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                                    <button class="btn btn-success" id="startBtn" onclick="startSimulation()">
                                        <i class="fas fa-play me-2"></i>开始仿真
                                    </button>
                                    <button class="btn btn-danger" id="stopBtn" onclick="stopSimulation()" disabled>
                                        <i class="fas fa-stop me-2"></i>停止仿真
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-download me-2"></i>
                            实验报告
                        </h5>
                    </div>
                    <div class="card-body">
                        <button class="btn btn-primary w-100" onclick="generateReport()">
                            <i class="fas fa-file-alt me-2"></i>生成报告
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 仿真视图和指标 -->
        <div class="row">
            <div class="col-lg-8">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-eye me-2"></i>
                            仿真视图
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="simulation-view" id="simulationView">
                            <canvas id="threeCanvas" class="w-100 h-100"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-4">
                <!-- 实时指标 -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-chart-line me-2"></i>
                            实时指标
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-6">
                                <div class="metric-card">
                                    <div class="metric-value" id="stepCount">0</div>
                                    <div class="metric-label">仿真步数</div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="metric-card">
                                    <div class="metric-value" id="velocity">0.0</div>
                                    <div class="metric-label">速度 (m/s)</div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-6">
                                <div class="metric-card">
                                    <div class="metric-value" id="energy">0.0</div>
                                    <div class="metric-label">能耗</div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="metric-card">
                                    <div class="metric-value" id="reward">0.0</div>
                                    <div class="metric-label">奖励</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 实时图表 -->
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-chart-area me-2"></i>
                            性能趋势
                        </h5>
                    </div>
                    <div class="card-body">
                        <canvas id="performanceChart" width="400" height="200"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <!-- 报告列表 -->
        <div class="row mt-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-history me-2"></i>
                            实验报告历史
                        </h5>
                    </div>
                    <div class="card-body">
                        <div id="reportsList">
                            <p class="text-muted text-center">暂无实验报告</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 生成报告模态框 -->
    <div class="modal fade" id="reportModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">生成实验报告</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="reportForm">
                        <div class="mb-3">
                            <label class="form-label">报告标题</label>
                            <input type="text" class="form-control" id="reportTitle" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">描述</label>
                            <textarea class="form-control" id="reportDescription" rows="3"></textarea>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">标签</label>
                            <input type="text" class="form-control" id="reportTags" placeholder="用逗号分隔">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="submitReport()">生成</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.2/js/bootstrap.bundle.min.js"></script>
    <script src="app.js"></script>
</body>
</html>
